/* =============== 首页紧凑简约设计系统 =============== */
:root {
  /* 🎨 项目统一色彩系统 - 基于项目主色调 #409eff */
  --home-primary: #409eff;
  --home-primary-dark: #337ecc;
  --home-primary-darker: #265a99;
  --home-primary-light: #66b1ff;
  --home-primary-lighter: #b3d8ff;
  --home-primary-lightest: #ecf5ff;

  /* 辅助色彩 */
  --home-success: #67c23a;
  --home-success-light: #95d475;
  --home-success-lighter: #c2e7b0;
  --home-success-lightest: #f0f9eb;

  --home-warning: #e6a23c;
  --home-warning-light: #ebb563;
  --home-warning-lighter: #f0c78a;
  --home-warning-lightest: #fdf6ec;

  --home-danger: #f56c6c;
  --home-danger-light: #f78989;
  --home-danger-lighter: #fab6b6;
  --home-danger-lightest: #fef0f0;

  --home-info: #909399;
  --home-info-light: #a6a9ad;
  --home-info-lighter: #c8c9cc;
  --home-info-lightest: #f4f4f5;

  /* 中性色系统 - 浅色模式 */
  --home-text-primary: #303133;
  --home-text-regular: #606266;
  --home-text-secondary: #909399;
  --home-text-placeholder: #c0c4cc;
  --home-text-disabled: #c0c4cc;

  /* 背景色系统 - 浅色模式 */
  --home-bg-body: #f5f7fa;
  --home-bg-primary: #ffffff;
  --home-bg-regular: #f8f9fa;
  --home-bg-light: #fafbfc;
  --home-bg-lighter: #fafafa;
  --home-bg-extra-light: #fafcff;

  /* 边框色系统 - 浅色模式 */
  --home-border-base: #dcdfe6;
  --home-border-light: #e4e7ed;
  --home-border-lighter: #ebeef5;
  --home-border-extra-light: #f2f6fc;

  /* 📏 紧凑间距系统 - 4px 基准 */
  --home-spacing-xs: 2px;
  /* 0.5 * base */
  --home-spacing-sm: 4px;
  /* 1 * base */
  --home-spacing-md: 8px;
  /* 2 * base */
  --home-spacing-lg: 12px;
  /* 3 * base */
  --home-spacing-xl: 16px;
  /* 4 * base */
  --home-spacing-xxl: 20px;
  /* 5 * base */

  /* 📐 模块间距系统 - 紧凑化 */
  --home-module-gap: 16px;
  /* 模块间主要间距 */
  --home-module-gap-large: 20px;
  /* 大模块间距 */
  --home-module-gap-small: 12px;
  /* 小模块间距 */

  /* 🔄 圆角系统 - 简约化 */
  --home-radius-xs: 2px;
  --home-radius-sm: 4px;
  --home-radius-md: 6px;
  --home-radius-lg: 8px;
  --home-radius-xl: 10px;
  --home-radius-xxl: 12px;
  --home-radius-round: 16px;

  /* 🌟 阴影系统 - 简约化 */
  --home-shadow-none: none;
  --home-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.03);
  --home-shadow-base: 0 1px 4px rgba(0, 0, 0, 0.05);
  --home-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.06);
  --home-shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.08);
  --home-shadow-heavy: 0 6px 16px rgba(0, 0, 0, 0.10);

  /* 悬停阴影 */
  --home-shadow-hover-light: 0 2px 4px rgba(64, 158, 255, 0.06);
  --home-shadow-hover-medium: 0 4px 8px rgba(64, 158, 255, 0.08);
  --home-shadow-hover-strong: 0 6px 12px rgba(64, 158, 255, 0.10);

  /* 🎯 动画系统 */
  --home-transition-base: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --home-transition-fade: opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  --home-transition-color: color 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  --home-transition-border: border-color 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  --home-transition-box-shadow: box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  --home-transition-transform: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);

  /* 📱 响应式断点 */
  --home-breakpoint-xs: 480px;
  --home-breakpoint-sm: 768px;
  --home-breakpoint-md: 992px;
  --home-breakpoint-lg: 1200px;
  --home-breakpoint-xl: 1920px;

  /* 详细响应式断点 */
  --home-breakpoint-mobile-s: 375px;
  --home-breakpoint-mobile-m: 480px;
  --home-breakpoint-tablet: 768px;
  --home-breakpoint-desktop-s: 992px;
  --home-breakpoint-desktop-m: 1200px;
  --home-breakpoint-desktop-l: 1400px;
  --home-breakpoint-desktop-xl: 1920px;

  /* 高度适配变量 */
  --home-min-height-xs: 200px;
  --home-min-height-sm: 250px;
  --home-min-height-md: 300px;
  --home-min-height-lg: 350px;
  --home-min-height-xl: 400px;
  --home-min-height-xxl: 450px;

  /* 内容区域高度变量 */
  --home-content-min-height-xs: 180px;
  --home-content-min-height-sm: 220px;
  --home-content-min-height-md: 280px;
  --home-content-min-height-lg: 320px;
  --home-content-min-height-xl: 380px;
  --home-content-min-height-xxl: 420px;
}

/* =============== 暗黑模式支持 =============== */
[data-theme='dark'] .home-container,
.dark .home-container {
  /* 中性色系统 - 暗色模式 */
  --home-text-primary: #e5eaf3;
  --home-text-regular: #cfd3dc;
  --home-text-secondary: #a3a6ad;
  --home-text-placeholder: #6c6e72;
  --home-text-disabled: #6c6e72;

  /* 背景色系统 - 暗色模式 */
  --home-bg-body: #141414;
  --home-bg-primary: #1f1f1f;
  --home-bg-regular: #262626;
  --home-bg-light: #2f2f2f;
  --home-bg-lighter: #363636;
  --home-bg-extra-light: #3a3a3a;

  /* 边框色系统 - 暗色模式 */
  --home-border-base: #424242;
  --home-border-light: #3a3a3a;
  --home-border-lighter: #333333;
  --home-border-extra-light: #2a2a2a;

  /* 主色调暗色模式调整 */
  --home-primary-lightest: rgba(64, 158, 255, 0.1);
  --home-primary-lighter: rgba(64, 158, 255, 0.2);
  --home-success-lightest: rgba(103, 194, 58, 0.1);
  --home-success-lighter: rgba(103, 194, 58, 0.2);
  --home-warning-lightest: rgba(230, 162, 60, 0.1);
  --home-warning-lighter: rgba(230, 162, 60, 0.2);
  --home-danger-lightest: rgba(245, 108, 108, 0.1);
  --home-danger-lighter: rgba(245, 108, 108, 0.2);
  --home-info-lightest: rgba(144, 147, 153, 0.1);
  --home-info-lighter: rgba(144, 147, 153, 0.2);

  /* 阴影系统暗色模式 */
  --home-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.3);
  --home-shadow-base: 0 1px 4px rgba(0, 0, 0, 0.4);
  --home-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.5);
  --home-shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.6);
  --home-shadow-heavy: 0 6px 16px rgba(0, 0, 0, 0.7);
}

/* =============== 首页主布局 - 紧凑简约 =============== */
.home-container {
  background: var(--home-bg-body);
  padding: var(--home-module-gap);
  display: flex;
  flex-direction: column;
  gap: var(--home-module-gap);

  /* 确保容器占满屏幕 */
  width: 100%;
  box-sizing: border-box;

  /* 简约过渡效果 */
  transition: var(--home-transition-color);
}

/* =============== 统一卡片基础样式 - 简约风格 =============== */
.home-card {
  background: var(--home-bg-primary);
  border-radius: var(--home-radius-lg);
  box-shadow: var(--home-shadow-base);
  border: 1px solid var(--home-border-lighter);
  padding: var(--home-spacing-xl);
  transition: var(--home-transition-box-shadow), var(--home-transition-transform);

  &:hover {
    box-shadow: var(--home-shadow-hover-medium);
    border-color: var(--home-border-light);
  }

  /* 卡片内间距优化 - 紧凑化 */
  &>*:not(:last-child) {
    margin-bottom: var(--home-spacing-lg);
  }
}

/* =============== 统一标题样式 - 简约风格 =============== */
.home-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--home-text-primary);
  margin: 0 0 var(--home-spacing-lg) 0;
  padding: 0 0 var(--home-spacing-md) 0;
  border-bottom: 1px solid var(--home-border-extra-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  /* 简约装饰线 */
  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 30px;
    height: 1px;
    background: var(--home-primary);
    border-radius: var(--home-radius-xs);
  }

  /* 图标样式 - 简约化 */
  .title-icon {
    margin-right: var(--home-spacing-sm);
    color: var(--home-primary);
    font-size: 16px;
  }

  /* 副标题 */
  .title-extra {
    font-size: 13px;
    font-weight: 400;
    color: var(--home-text-secondary);
  }
}

/* =============== 响应式网格系统 - 紧凑布局 =============== */
.home-grid {
  display: grid;
  gap: var(--home-module-gap);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  /* 网格项间距优化 */
  .home-grid-item {
    min-height: var(--home-min-height-md);
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* 2列布局 */
  &.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3列布局 */
  &.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 响应式网格列数调整 */
  @media (min-width: var(--home-breakpoint-desktop-xl)) {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }

  @media (min-width: var(--home-breakpoint-desktop-l)) and (max-width: calc(var(--home-breakpoint-desktop-xl) - 1px)) {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  }

  @media (min-width: var(--home-breakpoint-desktop-m)) and (max-width: calc(var(--home-breakpoint-desktop-l) - 1px)) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }

  @media (min-width: var(--home-breakpoint-desktop-s)) and (max-width: calc(var(--home-breakpoint-desktop-m) - 1px)) {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  @media (min-width: var(--home-breakpoint-tablet)) and (max-width: calc(var(--home-breakpoint-desktop-s) - 1px)) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  @media (max-width: calc(var(--home-breakpoint-tablet) - 1px)) {
    grid-template-columns: 1fr;
  }
}

/* =============== 统一组件样式 - 简约风格 =============== */

/* 加载状态 */
.home-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--home-text-secondary);

  .loading-text {
    margin-left: var(--home-spacing-sm);
    font-size: 14px;
  }
}

/* 空状态 */
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: var(--home-spacing-xl);
  color: var(--home-text-secondary);

  .empty-icon {
    font-size: 40px;
    margin-bottom: var(--home-spacing-md);
    opacity: 0.4;
  }

  .empty-text {
    font-size: 15px;
    margin-bottom: var(--home-spacing-sm);
  }

  .empty-desc {
    font-size: 13px;
    color: var(--home-text-placeholder);
  }
}

/* 统一按钮样式 - 简约风格 */
.home-btn {
  padding: var(--home-spacing-md) var(--home-spacing-lg);
  border-radius: var(--home-radius-md);
  border: 1px solid var(--home-border-base);
  background: var(--home-bg-primary);
  color: var(--home-text-regular);
  cursor: pointer;
  transition: var(--home-transition-base);
  font-size: 14px;
  font-weight: 500;

  &:hover {
    border-color: var(--home-primary);
    color: var(--home-primary);
    background: var(--home-primary-lightest);
  }

  &.btn-primary {
    background: var(--home-primary);
    border-color: var(--home-primary);
    color: #ffffff;

    &:hover {
      background: var(--home-primary-light);
      border-color: var(--home-primary-light);
    }
  }
}

/* =============== 响应式设计 - 紧凑适配 =============== */

/* 超大屏幕 (1920px+) */
@media (min-width: var(--home-breakpoint-desktop-xl)) {
  .home-container {
    padding: var(--home-module-gap-large);
    gap: var(--home-module-gap-large);
  }

  .home-grid {
    gap: var(--home-module-gap-large);
  }

  .home-card {
    padding: var(--home-spacing-xl);
  }

  .home-grid-item {
    min-height: var(--home-min-height-xxl);
  }
}

/* 大屏幕 (1400px - 1919px) */
@media (min-width: var(--home-breakpoint-desktop-l)) and (max-width: calc(var(--home-breakpoint-desktop-xl) - 1px)) {
  .home-container {
    padding: var(--home-module-gap-large);
    gap: var(--home-module-gap-large);
  }

  .home-grid {
    gap: var(--home-module-gap-large);
  }

  .home-card {
    padding: var(--home-spacing-xl);
  }

  .home-grid-item {
    min-height: var(--home-min-height-xl);
  }
}

/* 中等大屏幕 (1200px - 1399px) */
@media (min-width: var(--home-breakpoint-desktop-m)) and (max-width: calc(var(--home-breakpoint-desktop-l) - 1px)) {
  .home-container {
    padding: var(--home-spacing-lg);
    gap: var(--home-spacing-lg);
  }

  .home-grid {
    gap: var(--home-spacing-lg);
  }

  .home-card {
    padding: var(--home-spacing-lg);
  }

  .home-grid-item {
    min-height: var(--home-min-height-lg);
  }
}

/* 中等屏幕 (992px - 1199px) */
@media (min-width: var(--home-breakpoint-desktop-s)) and (max-width: calc(var(--home-breakpoint-desktop-m) - 1px)) {
  .home-container {
    padding: var(--home-spacing-lg);
    gap: var(--home-spacing-lg);
  }

  .home-grid {
    gap: var(--home-spacing-lg);
  }

  .home-card {
    padding: var(--home-spacing-lg);
  }

  .home-grid-item {
    min-height: var(--home-min-height-md);
  }
}

/* 平板横屏 (768px - 991px) */
@media (min-width: var(--home-breakpoint-tablet)) and (max-width: calc(var(--home-breakpoint-desktop-s) - 1px)) {
  .home-container {
    padding: var(--home-spacing-md);
    gap: var(--home-spacing-md);
  }

  .home-grid {
    gap: var(--home-spacing-md);
  }

  .home-card {
    padding: var(--home-spacing-md);
  }

  .home-section-title {
    font-size: 16px;
    margin-bottom: var(--home-spacing-md);
    padding-bottom: var(--home-spacing-sm);
  }

  .home-grid-item {
    min-height: var(--home-min-height-sm);
  }
}

/* 平板竖屏和手机 (≤767px) */
@media (max-width: calc(var(--home-breakpoint-tablet) - 1px)) {
  .home-container {
    padding: var(--home-spacing-md);
    gap: var(--home-spacing-md);
  }

  .home-grid {
    grid-template-columns: 1fr;
    gap: var(--home-spacing-md);
  }

  .home-card {
    padding: var(--home-spacing-md);
  }

  .home-section-title {
    font-size: 16px;
    margin-bottom: var(--home-spacing-md);
    padding-bottom: var(--home-spacing-sm);
  }

  .home-grid-item {
    min-height: var(--home-min-height-sm);
  }
}

/* 手机屏幕 (≤480px) */
@media (max-width: 480px) {
  .home-container {
    padding: var(--home-spacing-sm);
    gap: var(--home-spacing-sm);
  }

  .home-grid {
    gap: var(--home-spacing-sm);
  }

  .home-card {
    padding: var(--home-spacing-md);
    border-radius: var(--home-radius-md);
  }

  .home-section-title {
    font-size: 15px;
    margin-bottom: var(--home-spacing-sm);
  }
}

/* 小屏手机 (≤375px) */
@media (max-width: 375px) {
  .home-container {
    padding: var(--home-spacing-xs);
    gap: var(--home-spacing-xs);
  }

  .home-grid {
    gap: var(--home-spacing-xs);
  }

  .home-card {
    padding: var(--home-spacing-sm);
    border-radius: var(--home-radius-sm);
  }

  .home-section-title {
    font-size: 14px;
    margin-bottom: var(--home-spacing-xs);
  }
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-height: 600px) {
  .home-container {
    padding: var(--home-spacing-sm);
    gap: var(--home-spacing-sm);
  }

  .home-grid {
    gap: var(--home-spacing-sm);
  }

  .home-card {
    padding: var(--home-spacing-sm);
  }
}

/* =============== 工具类 =============== */
.text-primary {
  color: var(--home-text-primary) !important;
}

.text-regular {
  color: var(--home-text-regular) !important;
}

.text-secondary {
  color: var(--home-text-secondary) !important;
}

.text-placeholder {
  color: var(--home-text-placeholder) !important;
}

/* 日期时间通用样式 */
.date-text {
  font-size: 11px;
  color: var(--home-text-secondary);
  opacity: 0.8;
}

.bg-primary {
  background-color: var(--home-bg-primary) !important;
}

.bg-regular {
  background-color: var(--home-bg-regular) !important;
}

.bg-light {
  background-color: var(--home-bg-light) !important;
}

.border-base {
  border-color: var(--home-border-base) !important;
}

.border-light {
  border-color: var(--home-border-light) !important;
}

.border-lighter {
  border-color: var(--home-border-lighter) !important;
}

.shadow-none {
  box-shadow: var(--home-shadow-none) !important;
}

.shadow-light {
  box-shadow: var(--home-shadow-light) !important;
}

.shadow-base {
  box-shadow: var(--home-shadow-base) !important;
}

.shadow-medium {
  box-shadow: var(--home-shadow-medium) !important;
}

.shadow-strong {
  box-shadow: var(--home-shadow-strong) !important;
}